﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UserManager</title>
    <link href="~/kj/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        .fontsize {
            height: 38px;
            line-height: 38px;
        }

        td {
            text-align: center;
        }
    </style>
</head>
<body class="layui-col-md8 layui-col-md-offset1" style="margin-top: 10px;">
<div class="layui-form-item" width="400px;">
    <div class="layui-col-md4 layui-col-md-offset4">
        <input name="searchName" type="text" value="@ViewBag.SearchName" class="layui-col-md9 fontsize" placeholder="请输入" />
        <button type="button" name="Search" class="layui-btn layui-btn-norma layui-bg-black layui-col-md3">搜索</button>
    </div>
</div>

<table id="Activetable" lay-filter="Activetable">
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">冻结</a>
    <a class="layui-btn layui-btn-xs" lay-event="dd">解冻</a>
</script>

<div id="page"></div>
    




<script src="~/kj/layui/layui.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'jquery','laypage'],
        function () {
            var layer = layui.layer;
            var laypage = layui.laypage;
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;
            //table渲染方法
            function tablerender() {
                table.render({
                    elem: '#Activetable'
                    , height: 535
                    , url: '/User/GetList' //数据接口
                    , where: { searchName: $('input[name=searchName]').val() }
                    , title: '用户表'
                    , page: true //开启分页
                    , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , id: 'ID'
                    , cols: [
                        [//表头
                            { type: 'checkbox', align: 'center' },
                            { align: 'center', type: 'numbers' },
                            { field: 'Account', title: '用户名', width: 263, align: 'center' },
                            { field: 'AcId', title: '权限', width: 250, align: 'center' },
                            { field: 'IsActive', title: '状态', width: 250, align: 'center' },
                            { title: '操作', width: 175, align: 'center', toolbar: '#barDemo' }
                        ]
                    ], parseData: function (res) { //res 即为原始返回的数据
                        //console.log(res);
                        return {
                            "code": res.status, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.data //解析数据列表
                        };
                    }
                });
            }

            //冻结
            function IsActive(ID) {
                $.get("/User/IsActive",
                    { 'ID': ID },
                    function () {
                        layer.msg('冻结成功');
                        tablerender();
                    });
            }
            function Active(ID) {
                $.get("/User/Active",
                    { 'ID': ID },
                    function () {
                        layer.msg('解冻成功');
                        tablerender();
                    });
            }

            //监听搜索按钮事件
            $('button[name=Search]').click(function () {
                tablerender();
            });

            //渲染table
            tablerender();

            //监听头工具栏事件
            table.on('toolbar(Activetable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.ID)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            console.log(data);
                            layer.msg('冻结');
                            $.each(data,
                                function () {
                                    IsActive(this.ID);
                                });
                        }
                        break;
                    case 'add':
                        layer.open({
                            title: '新增管理员用户',
                            type: 1,
                            area: ['400px', '500px'],
                            resize: false,
                            anim: 1,
                            skin: 'layui-layer-molv', //样式类名
                            shadeClose: true, //开启遮罩关闭
                            btnAlign: 'c',
                            btn: ['添加', '取消'],
                            content: '<div class="layui-form-item  "><label class="layui-form-label">用户名</label><div class="layui-input-inline layui-col-md4"><input type="text" class="layui-input" name="Account"/></div></div><div class="layui-form-item  "><label class="layui-form-label">密码</label><div class="layui-input-inline layui-col-md4"><input type="password" class="layui-input" name="passwrod"/></div></div><div class="layui-form-item  "><label class="layui-form-label">确认密码</label><div class="layui-input-inline layui-col-md4"><input type="password" class="layui-input" name="passwrod2"/></div></div>',
                            btn1: function (index, layero) {
                                Account = $('[Name=Account]').val();
                                passwrod = $('[Name=passwrod]').val();
                                passwrod2 = $('[Name=passwrod2]').val();
                                if (passwrod == passwrod2) {

                                    $.post("/User/CreateManager", { passwrod: passwrod, Account: Account },
                                        function (msg) {
                                            if (msg == 0) {
                                                layer.msg("注册成功！");
                                                layer.close(index);
                                            } else { layer.msg("用户名已存在，请重新输入！"); }

                                        });
                                }
                                else { layer.msg("两次密码不相同，请重新输入"); }
                            }
                            , end: function () {
                                tablerender();
                            }

                        });
                        break;
                };
            });

            //监听操作栏事件
            table.on('tool(Activetable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.open({
                        type: 2
                        , title: data.Account
                        , content: '/User/UserInfoDetail?ID=' + data.ID
                        , area: ['800px', '610px']
                        , btn: ['返回']
                        , btn1: function (index) {
                            layer.close(index);
                        }
                        , end: function () {
                            tablerender();
                        }
                    });
                } else if (layEvent === 'del') {
                    layer.confirm('真的冻结吗', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        IsActive(data.ID);
                    });
                }
                else if (layEvent === 'dd') {
                    layer.confirm('真的解冻吗', function (index) {
                        layer.close(index);
                        Active(data.ID);
                    });
                }
            });
        });
</script>
</body>
</html>
